<template>
    <div class="right-content">
      <!-- 头部查询区域 -->
        <el-form :inline="true" :model="othersData" class="demo-form-inline">
          <div style="display:inline-block">
            <el-form-item>
              <el-input placeholder="请输入搜索的角色名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="drawer = true" type="primary" style="margin-right: 10px">搜索</el-button>
              <el-drawer
                title="高级查询"
                :visible.sync="drawer"
                direction="ttb"
                style="width:1000px; height:1000px; margin: 50px auto; border-radius: 20px">
                <div style="margin-left: 40px; margin-bottom: 20px">
                <el-button @click="innerDrawer = true" type="primary">工号查询</el-button>
                <el-button @click="innerDrawer = true" type="primary">姓名查询</el-button>
                <el-button @click="innerDrawer = true" type="primary">部门查询</el-button>
                <el-button @click="innerDrawer = true" type="primary">职务查询</el-button>
                <el-button @click="innerDrawer = true" type="primary">电话查询</el-button>
                </div>
                <el-input v-if="innerDrawer == true" style="width: 300px; margin-left: 40px" placeholder="请输入查询信息"></el-input>
                <div class="demo-drawer__footer">
                  <el-button @click="drawer = false">取 消</el-button>
                  <el-button type="primary" @click="drawer = false">确定</el-button>
                </div>
              </el-drawer>
              <el-button type="primary" @click="addRole()">新建角色</el-button>
            </el-form-item>
          </div>
        </el-form>
        <!-- 内容区域：查看他人信息的表格，实现表格分页 -->
        <el-table
          ref="rolemultipleTable"
          :data="currentData"
          :header-cell-style="headerStyle"
          :cell-style="cellStyle"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            prop="nameZh"
            label="角色名称"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="角色说明"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-link type="primary">角色成员</el-link>
              <el-link type="danger" @click="deleteHandle(scope.row)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px; margin-right: 20px">
          <el-pagination
            align="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 8, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
          </el-pagination>
        </div>
        <el-dialog
         title="新建角色"
         :close-on-click-modal="false"
         :visible.sync="addRolevisible"
         center="center"
         width="40%">
         <el-form :model="addRoledata" ref="addRoledata" :rules="rolesRule">
            <el-form-item label="角色名称" prop="rolename">
                <el-input v-model="addRoledata.rolename" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="角色说明" prop="explain">
                <el-input v-model="addRoledata.explain" placeholder="请输入角色说明"></el-input>
            </el-form-item>
         </el-form>
         <span slot="footer" class="dialog-footer">
            <el-button @click="addRolevisible = false">取消</el-button>
            <el-button  type="primary" @click="addRolevisible = false">确定</el-button>
         </span>
        </el-dialog>
    </div>
</template>

<script>
import StaffPermissionTree from './StaffPermissionTree.vue'
export default {
  name: 'StaffManage',
  data() {
    return {
      tableData: [], // 表格中的角色数据
      currentData: [], // 当前页面的所有角色的数据
      multipleSelection: [], // 选定的多个复选框对象
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页选定的显示条数
      othersData: { // 想要查询的角色数据
        name: '',
        region: ''
      },
      addRoledata: [
        {
          rolename: '',
          explain: ''
        }
      ],
      addRolevisible: false,
      StaffPermissionTreeVisible: false,
      drawer: false,
      innerDrawer: false,
      rolesRole: {
        rolename: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ],
        explain: [
          { required: true, message: '角色说明不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    StaffPermissionTree
  },
  // 生命周期
  mounted() {
    this.getothersDataList()
  },
  watch: {
    tableData(newValue, oldValue) {
      this.currentData = newValue.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    CurrentPage(newValue, oldValue) {
      this.currentPage = this.tableData.slice((newValue - 1) * this.pageSize, newValue * this.pageSize)
    }
  },
  methods: {
    // 选择每页行数
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
    },
    // 选择页码
    handleCurrentChange(val) {
      this.currentPage = val
    },
    // 表格行高
    cellStyle() {
      return {
        'font-size': '14px',
        height: '45px',
        padding: '0'
      }
    },
    // 表头行高
    headerStyle() {
      return {
        height: '55px'
      }
    },
    // 选择的复选框的数量
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取数据列表
    getothersDataList() {
      this.getRequest('/admin/roles').then((resp) => {
        if (resp) {
          this.tableData = resp.data
        } else {
          console.log('失败')
        }
      })
    },
    // 新建角色弹框
    addRole(data) {
      this.addRolevisible = true // 显示弹出框
      // this.getothersDataList()
    },
    addroledialog() {
      this.$refs.addRoledata.validate(valid => {
        if (valid) {
          this.postRequest()
        }
      })
    },
    // 删除
    deleteHandle(data) {
      this.$confirm('此操作将永久删除' + data.name + '员工的所有信息，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/admin/emp/' + data.id).then((resp) => {
          if (resp) {
            this.$message.success('删除成功')
            this.getothersDataList()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    onSubmit() {
      console.log('submit!')
    },
    // 员工权限
    permissiontree(data) {
      console.log(data)
      this.StaffPermissionTreeVisible = true
      this.$nextTick(() => {
        this.$refs.StaffPermissionTree.init(data)
      })
    }
  }
}
</script>

<style scoped>
.demo-form-inline{
  width: 97%;
  display: flex;
  justify-content: space-between;
  margin: 20px auto;
  margin-bottom: 0px;
}
.el-table{
  width: 97%;
  margin: 0px auto
}
/** 分页器 start  */
.block {
  position: absolute;
  top: 90%;
  right: 1.5%;
}
.el-pagination {
  align-items: center;
}
.el-pagination /deep/ span:not([class*=suffix]) {
  font: 1vw '宋体';
  padding-top: 0px;
}
.el-pagination /deep/ .el-pagination__total {
  padding-top: 5px !important;
}
.el-pagination /deep/ .el-input__inner {
  font: 1vw '宋体';
}
/** 分页器 end */
</style>
